<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">

  <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
  <link rel="stylesheet" th:href="@{/css/main.css}">
  <link rel="stylesheet" th:href="@{/css/doc.min.css}">
  <link rel="stylesheet" th:href="@{/ztree/zTreeStyle.css}">
  <style>
    .tree li {
      list-style-type: none;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <div th:replace="~{fragment/header :: head}"></div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-2 sidebar">
        <div th:replace="~{fragment/menu :: left}"></div>
      </div>
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

        <div class="panel panel-default">
          <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限分配列表<div
              style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
                class="glyphicon glyphicon-question-sign"></i></div>
          </div>
          <div class="panel-body">
            <button class="btn btn-success" onclick="doAssign()">分配许可</button>
            <br><br>
            <ul id="treeDemo" class="ztree"></ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
  <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
  <script th:src="@{/script/docs.min.js}"></script>
  <script th:src="@{/ztree/jquery.ztree.all-3.5.min.js}"></script>
  <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
  <script th:inline="javascript" type="text/javascript">
    var ctxPath = [[${ application.ctxPath }]];
    const params = new URLSearchParams(window.location.search);
    console.log("ctxPath: " + ctxPath + "; params:" + params)
    $(function () {
      $(".list-group-item").click(function () {
        if ($(this).find("ul")) {
          $(this).toggleClass("tree-closed");
          if ($(this).hasClass("tree-closed")) {
            $("ul", this).hide("fast");
          } else {
            $("ul", this).show("fast");
          }
        }
      });

      var setting = {
        check: {
          enable: true
        },
        view: {
          selectedMulti: false,
          addDiyDom: function (treeId, treeNode) {
            var icoObj = $("#" + treeNode.tId + "_ico"); // tId = permissionTree_1, $("#permissionTree_1_ico")
            if (treeNode.icon) {
              icoObj.removeClass("button ico_docu ico_open").addClass("fa fa-fw " + treeNode.icon).css("background", "");
            }
          },
        },
        async: {
          enable: true,
          url: "tree.txt",
          autoParam: ["id", "name=n", "level=lv"]
        },
        callback: {
          onClick: function (event, treeId, json) {

          }
        }
      };
      //$.fn.zTree.init($("#treeDemo"), setting); //异步访问数据

      // var d = [{"id":1,"pid":0,"seqno":0,"name":"系统权限菜单","url":null,"icon":"fa fa-sitemap","open":true,"checked":false,"children":[{"id":2,"pid":1,"seqno":0,"name":"控制面板","url":"dashboard.htm","icon":"fa fa-desktop","open":true,"checked":false,"children":[]},{"id":6,"pid":1,"seqno":1,"name":"消息管理","url":"message/index.htm","icon":"fa fa-weixin","open":true,"checked":false,"children":[]},{"id":7,"pid":1,"seqno":1,"name":"权限管理","url":"","icon":"fa fa-cogs","open":true,"checked":false,"children":[{"id":8,"pid":7,"seqno":1,"name":"用户管理","url":"user/index.htm","icon":"fa fa-user","open":true,"checked":false,"children":[]},{"id":9,"pid":7,"seqno":1,"name":"角色管理","url":"role/index.htm","icon":"fa fa-graduation-cap","open":true,"checked":false,"children":[]},{"id":10,"pid":7,"seqno":1,"name":"许可管理","url":"permission/index.htm","icon":"fa fa-check-square-o","open":true,"checked":false,"children":[]}]},{"id":11,"pid":1,"seqno":1,"name":"资质管理","url":"","icon":"fa fa-certificate","open":true,"checked":false,"children":[{"id":12,"pid":11,"seqno":1,"name":"分类管理","url":"cert/type.htm","icon":"fa fa-th-list","open":true,"checked":false,"children":[]},{"id":13,"pid":11,"seqno":1,"name":"资质管理","url":"cert/index.htm","icon":"fa fa-certificate","open":true,"checked":false,"children":[]}]},{"id":15,"pid":1,"seqno":1,"name":"流程管理","url":"process/index.htm","icon":"fa fa-random","open":true,"checked":false,"children":[]},{"id":16,"pid":1,"seqno":1,"name":"审核管理","url":"","icon":"fa fa-check-square","open":true,"checked":false,"children":[{"id":17,"pid":16,"seqno":1,"name":"实名认证人工审核","url":"process/cert.htm","icon":"fa fa-check-circle-o","open":true,"checked":false,"children":[]}]}]}];
      var data = [[${ tree }]]
      console.log(data);
      $.fn.zTree.init($("#treeDemo"), setting, data);
    });

    function doAssign() {
      var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
      var nodes = treeObj.getCheckedNodes(true);
      console.log(nodes);

      if (nodes.length == 0) {
        layer.msg("请选择要分配的权限", { time: 2000, icon: 5, shift: 6 }, function () { });
        return;
      }

      var permissionIds = [];
      nodes.forEach(function (node) {
        console.log(node);
        permissionIds.push(node.id);
      });

      $.ajax({
        url: ctxPath + "/role/doAssign?roleId=" + params.get("id") + "&permissionIds=" + permissionIds.join(","),
        type: "post",
        contentType: "application/json;charset=utf-8",
        success: function (result) {
            layer.msg("分配权限成功", { time: 2000, icon: 6, shift: 6 }, function () {
            });
        },
        error: function (xhr, status, error) {
          console.log(xhr.responseJSON);
          layer.msg(xhr.responseJSON, { time: 2000, icon: 5, shift: 6 }, function () { });
        }
      })

    }
  </script>
</body>

</html>